<template>
  <a-modal
    title="通道标记"
    :width="1250"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    :footer="null"
  >
    <a-spin :spinning="confirmLoading" style="display: inline-flex">
      <div class="myMarkers">
        <div class="router-list">
          <div class="list-item">
            <div
              @click="getChannelInfo(item,index)"
              class="item"
              :class="routerIndex === index ? 'active' : ''"
              v-for="(item, index) in routers"
              :key="item.id"
            >
              通道{{ item.channel }}
            </div>
          </div>
        </div>
        <div class="marker-container">
          <ImageMarkersView
            :imageData="fileUrl + imgName"
            :markers="markers"
            :editorMode="true"
            @onMicClick="handleClick"
            @onEditorTouch="onEditorTouch"
            @onMouseUp="onMouseUp"
          />
        </div>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>

import ImageMarkersView from '@/components/ImageMarkersView/ImageMarkersView'
import { editById, getChannelList } from '@/api/modular/main/bizgatewaychannel/bizGatewayChannelManage'

export default {
  components: {
    ImageMarkersView
  },
  data () {
    return {
      url: window.CONST.VUE_APP_API_BASE_URL,
      fileUrl: window.CONST.VUE_APP_API_BASE_FILE_URL,
      imgName: '',
      visible: false,
      confirmLoading: false,
      routerIndex: 0,
      form: this.$form.createForm(this),
      channelList: [],
      routers: [],
      markers: [], // 已添加的点,
      routeItem: {}
    }
  },
  methods: {
    toIndex (record) {
      this.visible = true
      this.imgName = record.fileName
      this.deviceId = record.id
      this.getChannelList()
    },
    handleClick (marker) {
    },
    onEditorTouch ({ x, y }) {
      const routeItem = this.routers[this.routerIndex]

      const markers = this.markers
      const selectMicItem = this.markers.find(
        (value) => value.id === routeItem.id
      )
      if (selectMicItem) {
        selectMicItem.x = x
        selectMicItem.y = y
        // selectMicItem.url = 'mic-error'
        selectMicItem.status = 'selected'
      } else {
        markers.push(
          Object.assign({ status: 'selected' }, routeItem, {
            x,
            y
          })
          // Object.assign({ url: 'mic-error' }, routeItem, {
          //   x,
          //   y
          // })
        )
      }
      this.routeItem = routeItem
      this.markers = markers
    },
    onMouseUp () {
      this.editChannelPosion(this.routeItem)
    },
    editChannelPosion (routeItem) {
      const { form: { validateFields } } = this
      validateFields((errors, values) => {
        if (!errors) {
          values.id = routeItem.id
          values.xposion = routeItem.x.replace('%', '')
          values.yposion = routeItem.y.replace('%', '')
          editById(values).then((res) => {
            this.confirmLoading = false
            if (res.success) {
              // 成功之后变为离线
              // this.markers.find(
              //   value => {
              //     if (value.id === values.id) {
              //       this.markers[this.routerIndex].url = 'mic-offline'
              //     }
              //   }
              // )
              this.$message.success('编辑成功')
            } else {
              this.$message.info('编辑失败：' + res.message)
            }
          })
        }
      })
    },
    handleSubmit () {
      this.confirmLoading = true
    },
    handleCancel () {
      this.channelList = []
      this.visible = false
    },
    // 获取通道列表
    getChannelList () {
      getChannelList({ deviceId: this.deviceId }).then(res => {
        if (res.success) {
          this.channelList = res.data
          this.routers = []
          this.markers = []
          for (let i = 0; i < this.channelList.length; i++) {
            let param = {
              x: this.channelList[i].xposion + '%',
              y: this.channelList[i].yposion + '%',
              id: this.channelList[i].id,
              channel: this.channelList[i].channel,
              status: ''
            }
            // 通过channelTypeCode来区分不同类型的通道
            if (this.channelList[i].channelTypeCode.trim() === 'ZKHY-AWG-001') {
              param = Object.assign(param, { url: 'mic-sonic-source' })
            } else {
              param = Object.assign(param, { url: 'mic-offline' })
            }
            this.markers.push(param)
            this.routers.push(param)
          }
          // 默认选中第一个
          if (this.channelList.length > 0) {
            this.getChannelInfo(this.channelList[0], 0)
          }
        }
      })
    },
    getChannelInfo (item, index) {
      this.routerIndex = index
      // 遍历所有的marker设为离线
      this.markers.forEach(value => {
        // value.url = 'mic-offline'
        value.status = ''
      })
      // 找到选择的marker设为红色
      this.markers.find(
        value => {
          if (value.id === item.id) {
            // this.markers[index].url = 'mic-error'
            this.markers[index].status = 'selected'
          }
        }
      )
    }
  }
}
</script>

<style lang="less" scoped>
.table-operator {
  margin-bottom: 18px;
}

button {
  margin-right: 8px;
}
.myMarkers {
  margin: 0 auto;
  display: inline-flex;
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}
.router-list {
  width: 200px;
  height: 580px;
  border: 1px #2c3e50 solid;
  overflow-y: auto;
  background-image: url(~@/assets/img/menu_border.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.router-list .item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: #ffffff;
  /*background: #ededed;*/
  /*border-bottom: 1px #2c3e50 solid;*/
  font-size: 18px;
  line-height: 60px;
}
.router-list .item:hover,
.router-list .item.active {
  background-color: #5e9ad6;
  color: white;
}
.list-item{
  margin: 20px 10%;
}
.marker-container {
  width: 1025px;// 820px
  height: 606.25px;// 485px  height= 1025*485/820
}
</style>
